
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=yt0e61KnLOODLCuoC0GVqQXc"></script>
<!-- 加载百度地图样式信息窗口 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.js"></script>
<link rel="stylesheet" href="http://api.map.baidu.com/library/SearchInfoWindow/1.5/src/SearchInfoWindow_min.css" />
<!-- 加载城市列表 -->
<script type="text/javascript" src="http://api.map.baidu.com/library/CityList/1.2/src/CityList_min.js"></script>


<style>
    #l-map {width: 1170px;height: 498px;overflow: hidden;}
</style>
<!-- #welcome -->
<section id="welcome">

    <!-- .span4 -->
    <div class="span5">
        <h1>陈先森与陈太太<p><span class="color">想要去的地方</span></p></h1>
    </div><!-- /.span4 -->

    <!-- .span6 -->
    <div class="span6">
        <p>青梅煮酒醉亦醒，明月当歌痴亦狂。</p>
        <p>红尘俗世两相忘，神仙也睡花间堂。</p>
    </div><!-- /.span6 -->

</section><!-- /#welcome -->

<section class="row services">

    <!-- .span3 -->


    <!-- .span9 -->
    <div class="span12">

        <h3 class="title">We want to go? <small>Here here and here</small></h3>

        <!-- .row -->
        <div class="row">

            <!-- .span3 -->
            <div class="span3">

                <!-- #accordion .accordion -->
                <div id="accordion" class="accordion">

                    <?php foreach($feature_list as $key => $item): ?>
                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <input type="hidden" id="fe_<?php echo $item['id']; ?>" value="<?php echo $item['content']; ?>">
                                <a href="#acc1" data-parent="#accordion" data-toggle="collapse" name="featureme" onclick="featureme(this,<?php echo $item['id']; ?>)" class="accordion-toggle  <?php if($key == 0)echo 'acc-active'; ?>"><?php echo $item['name']; ?></a>
                            </div>
                        </div>
                    <?php endforeach; ?>
<!---->
<!--                    <div class="accordion-group">-->
<!--                        <div class="accordion-heading">-->
<!--                            <a href="#acc2" data-parent="#accordion" data-toggle="collapse" name="featureme" onclick="featureme(this)" class="accordion-toggle">陈太太要去泰国吃芒果饭</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!---->
<!--                    <div class="accordion-group">-->
<!--                        <div class="accordion-heading">-->
<!--                            <a href="#acc3" data-parent="#accordion" data-toggle="collapse" name="featureme" onclick="featureme(this)" class="accordion-toggle">陈先森准备去瑞士滑雪</a>-->
<!--                        </div>-->
<!--                    </div>-->
<!---->
<!--                    <div class="accordion-group">-->
<!--                        <div class="accordion-heading">-->
<!--                            <a href="#acc4" data-parent="#accordion" data-toggle="collapse" name="featureme" onclick="featureme(this)" class="accordion-toggle">陈先森陈太太的蜜月之地巴塞罗那</a>-->
<!--                        </div>-->
<!--                    </div>-->

                </div><!-- /#accordion .accordion -->

            </div><!-- /.span3 -->

            <!-- .span6 -->
            <div class="span9" id="feature_content">

                <p>不论是台北、九份还是高雄、肯定，来到台湾我基本就告别晚餐了，沿随处可见的夜市走一遍，看着那么多自己爱吃的小吃，绝对可以填饱肚子。而小吃的价格则是景区比城市中略高，垦丁比台北和高雄都贵一些，但仍然可以接受，一个晚上，4、500台币已经可以吃到撑了，要是吃饱的话，50人民币也足够了，如果觉得早上和中午没饭吃的话，没关系，台湾也随处可以找到小型便利店，完全不用担心。</p>

                <!-- .row.features -->
                <div class="row features">

                    <div class="span3">
                        <div class="box">
                            <img src="http://chihold.qiniudn.com/2014012009115537556.jpg-feature">
                        </div>
                    </div>

                    <div class="span3">
                        <div class="box">
                            <img src="http://chihold.qiniudn.com/2013102313364432340556.jpg-feature">
                        </div>
                    </div>

                    <div class="span3">
                        <div class="box">
                            <img src="http://chihold.qiniudn.com/2013102313234048957262.jpg-feature">
                        </div>
                    </div>

                </div><!-- /.row.features -->

            </div><!-- /.span6 -->

        </div><!-- /.row -->

    </div><!-- /.span9 -->

</section><!-- /.row.services -->

<div class="map-container">
    <div id="l-map"></div>
</div>


<div class="divider"></div>


    <script type="text/javascript">

        // 百度地图API功能
        var map = new BMap.Map("l-map");          // 创建地图实例
        var point = new BMap.Point(29.839852,46.476639);  // 创建点坐标
        map.centerAndZoom(point, 3);                 // 初始化地图，设置中心点坐标和地图级别
        map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件
        var customLayer;
        function addCustomLayer(keyword) {
            if (customLayer) {
                map.removeTileLayer(customLayer);
            }
            customLayer=new BMap.CustomLayer({
                geotableId: 49412,
                q: '', //检索关键字
                tags: 'for', //空格分隔的多字符串
                filter: '' //过滤条件,参考http://developer.baidu.com/map/lbs-geosearch.htm#.search.nearby
            });
            map.addTileLayer(customLayer);
            customLayer.addEventListener('hotspotclick',callback);
        }
        addCustomLayer();
        function callback(e)//单击热点图层
        {
            var customPoi = e.customPoi,
                str = [];
            str.push("address = " + customPoi.address);
            str.push("phoneNumber = " + customPoi.phoneNumber);
            var content = '<p style="width:280px;margin:0;line-height:20px;">地址：' + customPoi.address + '</p>';
            var searchInfoWindow = new BMapLib.SearchInfoWindow(map, content, {
                title: customPoi.title, //标题
                width: 290, //宽度
                height: 40, //高度
                panel : "panel", //检索结果面板
                enableAutoPan : true, //自动平移
                enableSendToPhone: true, //是否显示发送到手机按钮
                searchTypes :[
                    BMAPLIB_TAB_SEARCH,   //周边检索
                    BMAPLIB_TAB_TO_HERE,  //到这里去
                    BMAPLIB_TAB_FROM_HERE //从这里出发
                ]
            });


            var point = new BMap.Point(customPoi.point.lng, customPoi.point.lat);
            searchInfoWindow.open(point);
        }

        document.getElementById("open").onclick = function(){
            addCustomLayer();
        };

        document.getElementById("close").onclick = function(){
            if (customLayer) {
                map.removeTileLayer(customLayer);
            }
        };

        // 创建CityList对象，并放在citylist_container节点内
        var myCl = new BMapLib.CityList({container : "citylist_container", map : map});

        // 给城市点击时，添加相关操作
        myCl.addEventListener("cityclick", function(e) {
            // 修改当前城市显示
            document.getElementById("curCity").innerHTML = e.name;

            // 点击后隐藏城市列表
            document.getElementById("cityList").style.display = "none";
        });

        // 给“更换城市”链接添加点击操作
        document.getElementById("curCityText").onclick = function() {
            var cl = document.getElementById("cityList");
            if (cl.style.display == "none") {
                cl.style.display = "";
            } else {
                cl.style.display = "none";
            }
        };

        // 给城市列表上的关闭按钮添加点击操作
        document.getElementById("popup_close").onclick = function() {
            var cl = document.getElementById("cityList");
            if (cl.style.display == "none") {
                cl.style.display = "";
            } else {
                cl.style.display = "none";
            }
        };
        function featureme(obj,id){
            $("a[name='featureme']").each(function(i, o){
                $(o).attr("class", "accordion-toggle");
                //  a.push($(o).val());
                // 两种写法选一个就好
            });
            $(obj).addClass("acc-active");
            $.post('/index.php/trip/ajax_feature',{id : id},function(data){
                $('#feature_content').html(data);
            })
        }

    </script>

